<template>
    <div class="box">
        <h1>猪猪登记表</h1>
        <form action="" method="post">
            <label for="">你叫啥：</label>
            <input type="text" v-model="user.name" @blur="msg1">
            <p v-show="isName">请输入name</p>
            <br>
            <label for="">暗号：</label>
            <input type="password" v-model="user.password" @blur="msg2">
            <p v-show="isPsawword">请输入 暗号</p>
            <br>
            <label for="">性别：</label>
            <input type="radio" value="male" v-model="user.sex">
            <label for="male">男哒</label>
            <input type="radio" value="female" v-model="user.sex">
            <label for="female">女哒</label>
            <br>
            <label for="">你多大啦：</label>
            <select name="" id="" v-model="user.age">
                <option :value="age" v-for="age in ageArr" :key="age">{{ age }}</option>
            </select>
            <br>

            <label for="">了解一下你的爱好可以不：</label>
            <input type="checkbox" name="" value="xlq" v-model="user.hobbies">
            <label for="">想李琦</label>
            <input type="checkbox" name="" value="alq" v-model="user.hobbies">
            <label for="">爱李琦</label>
            <input type="checkbox" name="" value="qq" v-model="user.hobbies">
            <label for="">亲亲李琦</label>
            <input type="checkbox" name="" value="bb" v-model="user.hobbies">
            <label for="">抱抱李琦</label>

            <br>
            <label for="">快说：“最爱李琦惹”</label>
            <input type="text" name="" v-model="love" @blur="msg3">
            <p v-show="isLoveNull">快说</p>
            <p v-show="isLoveSpeak">别酱，好好说</p>
            <br>
            <input type="checkbox" name="" id="" @change="changeAgree">
            <label for="">同意成为李琦的猪猪</label>
            <br>

            <input type="submit" value="变猪猪！" @click="submit" :disabled="isTrue">

        </form>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';

const ageArr = ref([15, 16, 17, 18, 19, 20, 21, 22, 23])
interface IsUser {
    name: string,
    sex: string,
    hobbies: string[],
    age: number | string,
    password: string
}

const user = ref<IsUser>({
    name: '',
    sex: '',
    age: '',
    hobbies: [],
    password: ''
})

const isName = ref(false)
const isPsawword = ref(false)
const love = ref('')
const isLoveNull = ref(false)
const isLoveSpeak = ref(false)
const isTrue = ref(true)


const submit = () => {
    console.log(user.value);
    if (user.value.name === '' || user.value.password === '' || user.value.sex === '' || user.value.age === '' || user.value.hobbies.length === 0 || love.value === '') {
        alert('没填完哦！')
    }
}

const msg1 = () => {
    if (user.value.name === '') {
        console.log('请输入name');
        isName.value = true
    } else {
        isName.value = false
    }
}
const msg2 = () => {
    if (user.value.password === '') {
        console.log('请输入name');
        isPsawword.value = true
    } else {
        isPsawword.value = false
    }
}

const msg3 = () => {
    if (love.value === '') {
        console.log('快说');
        isLoveNull.value = true
    } else if (love.value === '最爱李琦惹') {
        console.log('说对啦');
        isLoveNull.value = false
        isLoveSpeak.value = false
    } else {
        console.log('别酱，好好说');
        isLoveNull.value = false
        isLoveSpeak.value = true
    }
}


const changeAgree = (e: Event) => {
    // 是否被选中
    const checked = (e.target as HTMLInputElement).checked
    console.log(checked); // 输出布尔值
    if (checked) {
        isTrue.value = false
    }
}


</script>

<style lang="scss" scoped>
.box {
    margin: 10px;
    padding: 10px;
}

p {
    color: red;
}
</style>